<template>
    <view class="dialog-container" v-show="show">
        <view class="dialog-body-container">
            <view class="dialog-title-container">
                <span>{{title}}</span>
            </view>
            <view class="dialog-content-container">
                <span>{{content}}</span>
            </view>
            <view class="divider"></view>
            <view class="dialog-operation-container">
                <span @click="closeDialog">{{confirmText}}</span>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
const proprs=defineProps({
    title:String,
    content:String,
    confirmText:String,
    show:Boolean
})
const emit=defineEmits(['update:show'])
    function closeDialog(){
        emit('update:show',false)
    }
</script>

<style lang="scss" scoped>
    @import '/static/css/common.scss';
    .dialog-container{
        @extend .dialog-layout;
        .dialog-body-container{
            @extend .column-layout;
            border-radius: 8px;
            width: 80%;
            background-color: white;
            .dialog-title-container{
                @extend .row-layout;
                justify-content: center;
                align-items: center;
                width: 100%;
                padding: 10px;
                span{
                    font-size: 18px;
                    height: 22px;
                    line-height: 22px;
                    color: black;
                    text-align: center;
                }
            }
            .dialog-content-container{
                @extend .row-layout;
                justify-content: center;
                align-items: center;
                width: 100%;
                padding: 10px;
                span{
                    font-size: 14px;
                    color: black;
                    text-align: center;
                }
            }
            .dialog-operation-container{
                @extend .row-layout;
                justify-content: center;
                align-items: center;
                width: 100%;
                padding: 10px;
                span{
                    font-size: 18px;
                    height: 22px;
                    line-height: 22px;
                    color: #3B86F3;
                    text-align: center;
                }
            }
        }
        
    }
</style>